<template>
	<view class="">
		<swiper v-if="activityList && activityList.TupianMS && activityList.TupianMS.length > 0" class="swiper" circular indicator-color="#D9D9D9" indicator-active-color="#007AFF"
			:indicator-dots="indicatorDots" :interval="interval" :duration="duration" style="position: absolute;">
			<swiper-item v-for="(item,index) in activityList.TupianMS" :key="index">
				<image :src="Microi.FileServer + item.Path" mode="aspectFill" style="width: 100%;height: 100%;"></image>
			</swiper-item>
		</swiper>
		<view class="" :style="{height:winInfo.height+'px',paddingTop:winInfo.top+ 0+'px'}">
			<view class="returnBox displayFlex" style="position: relative;">
				<image src="/static/images/my/icon-返回按钮@2x.png" mode="" @tap="returnTap()"></image>
				<text>|</text>
				<image src="/static/images/my/icon-转发@2x.png" mode="" @tap="shareTap()"></image>
			</view>
		</view>

		<view class="" style="margin-top: 600rpx;">
			<view class="swiperBox">
				<view class="">
					{{activityList.Biaoti || '暂无标题'}}
				</view>
				<view class="">
					<text>￥{{activityList.Jiage && activityList.CanyuRS ? (activityList.Jiage/activityList.CanyuRS) : 0}}</text>
					<text>/人</text>
					<text style="margin-left: 10rpx;">＊均为线下支付，本平台不收取任何费用</text>
				</view>
				<view class="displayFlex">
					<image src="/static/images/my/icon-时间@2x.png" mode=""></image>
					<text>{{ computeHDTime(activityList.HuodongSJ) }}</text>
				</view>
				<view class="displayFlex">
					<image src="/static/images/my/icon-地址@2x.png" mode=""></image>
					<!-- <text>10.3km </text> -->
					<text>{{activityList.XiangxiDZ || '暂无地址'}}</text>
				</view>
				<view class="">
					{{activityList.BijiNR || '暂无内容'}}
				</view>
				<view class="">
					{{ computeHDYear(activityList.HuodongSJ) }}
				</view>
				<view class="swiperBox-header displayFlex">
					<image src="/static/images/my/noData.png" mode=""></image>
					<text>哆啦梦</text>
					<text @tap="concernTap()"
						:class="concern==true?'redBackground':'grayBackground'">{{concern==true?'关注':'已关注'}}</text>
				</view>
			</view>
			<view class="numberBox" v-if="baomingList.length > 0">
				<view class="displayFlexSpaceBetween">
					<view class="numberBox-left">
						当前 6人一起
					</view>
					<view class="numberBox-right displayFlex">
						仅剩<text>1</text>个名额
						<image src="/static/images/my/箭头@2x.png" mode=""></image>
					</view>
				</view>
				<view class="displayFlex">
					<view class="numberBox-header " v-for="(item,index) in baomingList" :key="index">
						<image :src="item.TouxiangSC" mode="aspectFill" style="width: 100rpx;height: 100rpx;border-radius: 50%;"></image>
						<view>{{item.UserName}}</view>
					</view>
				</view>
			</view>
			<view class="contentBox">
				<view class="displayFlexSpaceBetween">
					<view class="contentBox-left">
						活动内容：
					</view>
					<view class="contentBox-right displayFlex" @tap="copyTap()">
						<image src="/static/images/my/复制.png" mode=""></image>
						复制
					</view>
				</view>
				<view class="" style="padding: 10rpx 0;">
					时间 :{{ computeHDYearTime(activityList.HuodongSJ) }}
				</view>
				<view class="">
					时长：{{computeDuration(activityList.HuodongSJ, activityList.UpdateTime)}}
					<!-- <text>({{computeHDHour(activityList.HuodongSJ)}}~{{computeHDHour(activityList.UpdateTime)}})</text> -->
				</view>
				<view class="" style="padding: 10rpx 0;">
					地点：{{fullAddress}}
				</view>
				<view class="">
					<!-- 人数：4位起，封顶6位 -->
					<text>人数：{{activityList.CanyuRS || 0}}位</text>
				</view>
				<view class="" style="padding: 10rpx 0;">

					<text>平摊：{{activityList.Jiage && activityList.CanyuRS ? (activityList.Jiage/activityList.CanyuRS) : 0}}/人</text>
					<text>（总价￥{{activityList.Jiage || 0}}）</text>
				</view>
			</view>

			<view class="" style="margin-top: 150rpx;">
				1
			</view>

			<view class="stopApplyBox" @tap="stopApplyTap()" v-if="stopShow==='true'">
				<text>停止申请</text>
			</view>
			<view class="aboardBox displayFlexSpaceBetween" v-else>
				<view class="aboardBox-left displayFlex">
					<view class="displayFlex">
						<image src="/static/images/my/icon-评论@2x.png" mode=""></image>
						<text>联系</text>
					</view>
					<view class="displayFlex">
						<image src="/static/images/my/icon-爱心@2x.png" mode=""></image>
						<text>1000</text>
					</view>
					<view class="displayFlex">
						<image src="/static/images/my/icon-收藏@2x.png" mode=""></image>
						<text>1K+</text>
					</view>
				</view>
				<view class="aboardBox-right" @tap="aboardTap(activityList)" v-if="baomingList.length < activityList.CanyuRS">
					<text>上车</text>
				</view>
				<view class="aboardBox-right" v-else>
					<text>报名中</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	// #ifdef VUE3
	import { toRaw } from 'vue'
	// #endif
	
	export default {
		data() {
			return {
				Islogin: this.Microi.IsLogin(),
				CurrentUser: this.Microi.Get(),
				indicatorDots: true, //是否显示面板指示点
				autoplay: true, //是否自动切换
				interval: 2000, //自动切换时间间隔
				duration: 500, //滑动动画时长
				stopShow: false,
				options: {},
				concern: true,
				fullAddress: '',
				winInfo: {
					height: 64, //header高度
					top: 26, //标题图标距离顶部距离
					scrollH: 0 //滚动总高度
				},
				activityList: {},
				// 礼包服务数据
				baomingList: [],
			}
		},
		mounted() {
			let obj = {};
			// #ifdef MP-WEIXIN
			obj = wx.getMenuButtonBoundingClientRect();
			// #endif
			// #ifdef MP-BAIDU
			obj = swan.getMenuButtonBoundingClientRect();
			// #endif
			// #ifdef MP-ALIPAY
			my.hideAddToDesktopMenu();
			// #endif
			setTimeout(() => {
				uni.getSystemInfo({
					success: (res) => {
						this.winInfo = res;
						this.winInfo.width = obj.left || res.windowWidth;
						this.winInfo.height = obj.top ? obj.top + obj.height + 8 : res
							.statusBarHeight + 44;
						this.winInfo.top = obj.top ? obj.top + (obj.height - 32) / 2 : res
							.statusBarHeight + 6;
						this.winInfo.scrollH = res.windowWidth;
					}
				});
			}, 0);
		},
		onShow() {
			this.startTime = new Date();
		},
		onHide() {
			if (this.Islogin) {
				// 获取当前页面栈
				const pages = getCurrentPages();
				// 获取当前页面的对象
				const currentPage = pages[pages.length - 1];
				// 获取当前页面的路径
				const route = currentPage.route;
				// 获取当前页面的参数
				const options = currentPage.options;
				this.Microi.ApiEngine.Run('Add_liulanLog', {
					YemianCS: options,
					YemianDZ: route,
					LiulanSJC: new Date().getTime() - this.startTime.getTime()
				});
			}
		},
		onUnload() {
			if (this.Islogin) {
				// 获取当前页面栈
				const pages = getCurrentPages();
				// 获取当前页面的对象
				const currentPage = pages[pages.length - 1];
				// 获取当前页面的路径
				const route = currentPage.route;
				// 获取当前页面的参数
				const options = currentPage.options;
				this.Microi.ApiEngine.Run('Add_liulanLog', {
					YemianCS: options,
					YemianDZ: route,
					LiulanSJC: new Date().getTime() - this.startTime.getTime()
				});
			}
		},
		onLoad(options) {
			this.options = options
			console.log("获取ID：", options.id);
			this.getGoodsData()
			this.getBaomingList()
		},
		methods: {
			//获取活动列表的详情
			async getGoodsData() {
				let res = await this.Microi.FormEngine.GetFormData({
					FormEngineKey: 'diy_huodong ',
					Id: this.options.id
				})
				if (res.Code == 1) {
					this.activityList = res.Data

					
					
					// 安全地解析TupianMS（图片信息）
					if (this.activityList.TupianMS) {
						try {
							this.activityList.TupianMS = JSON.parse(this.activityList.TupianMS);
						} catch (e) {
							this.activityList.TupianMS = [];
						}
					} else {
						this.activityList.TupianMS = [];
					}
					
					// 安全地解析SuozaiCS（城市信息）
					if (this.activityList.SuozaiCS) {
						try {
							let suoZaiCS = JSON.parse(this.activityList.SuozaiCS.replace(/\\"/g, '"'));
							let xiangxiDZ = this.activityList.XiangxiDZ || '';
							this.fullAddress = suoZaiCS.join("") + xiangxiDZ;
						} catch (e) {
							this.fullAddress = this.activityList.XiangxiDZ || '';
						}
					} else {
						this.fullAddress = this.activityList.XiangxiDZ || '';
					}
					
					return
				}
			},
			//获取报名列表
			async getBaomingList() {
				let res = await this.Microi.FormEngine.GetTableData({
                  FormEngineKey: 'diy_baomingList ',
                  _Where: [{ Name: 'HuodongID', Value: this.options.id, Type: '=' }]
                })
				console.log(res,'res');
				if (res.Code == 1) {
					this.baomingList = res.Data
					console.log(res,'rees');
				}
			},
			computeHDType(item) {
				var HuodongSJ = new Date(item.BaomingJZSJ).getTime();
				var TimeNow = new Date().getTime();
				var baomingCount = item.baomingCount;
				var CanyuRS = item.CanyuRS;
				if (HuodongSJ > TimeNow && baomingCount < CanyuRS) {
					return '报名中';
				} else if (HuodongSJ > TimeNow && baomingCount >= CanyuRS) {
					return '已满员';
				} else if (HuodongSJ <= TimeNow) {
					return '已结束';
				}
			},
			// 计算两个时间之间的时长
			computeDuration(startTime, endTime) {
				// 解析开始时间和结束时间
				const start = new Date(startTime);
				const end = new Date(endTime);

				// 检查时间是否有效
				if (isNaN(start.getTime()) || isNaN(end.getTime())) {
					return '时间无效';
				}

				// 计算时间差（毫秒）
				const diffMs = end.getTime() - start.getTime();

				// 如果结束时间早于开始时间，返回错误
				if (diffMs < 0) {
					return '时间顺序错误';
				}

				// 转换为小时和分钟
				const totalMinutes = Math.floor(diffMs / (1000 * 60));
				const hours = Math.floor(totalMinutes / 60);
				const minutes = totalMinutes % 60;

				// 格式化输出
				if (hours === 0) {
					return `${minutes}分钟`;
				} else if (minutes === 0) {
					return `${hours}小时`;
				} else {
					return `${hours}小时${minutes}分钟`;
				}
			},

			// 处理时间显示（不包含秒数）
			computeHDHour(DataInfo) {
				var time = new Date(DataInfo);
				if (isNaN(time.getTime())) {
					return '无效日期';
				}
				const year = time.getFullYear();
				const currentYear = new Date().getFullYear();
				const timeParts = DataInfo.split(' ');
				let timePart = timeParts.length > 1 ? timeParts[1] : '';

				// 移除秒数
				if (timePart) {
					// 处理单一时间
					if (!timePart.includes('~')) {
						const parts = timePart.split(':');
						if (parts.length >= 2) {
							timePart = parts[0] + ':' + parts[1];
						}
					} else {
						// 处理时间范围
						const [start, end] = timePart.split('~');
						const startParts = start.split(':');
						const endParts = end.split(':');
						if (startParts.length >= 2 && endParts.length >= 2) {
							timePart = `${startParts[0]}:${startParts[1]}~${endParts[0]}:${endParts[1]}`;
						}
					}
				}

				return `${year === currentYear ? '' : year}   ${timePart}`;
			},

			computeHDTime(DataInfo) {
				var time = new Date(DataInfo);
				var year = time.getFullYear();
				var month = time.getMonth() + 1;
				if (month < 10) month = `0${month}`;
				var day = time.getDate();
				if (day < 10) day = `0${day}`;
				var xingqi = time.getDay();
				var XingqiArray = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
				xingqi = XingqiArray[xingqi];

				return `${year == new Date().getFullYear() ? '' : year} ${month}月${day}日 ${xingqi} ${DataInfo.split(' ')[1]}`;
			},
			computeHDYear(DataInfo) {
				var time = new Date(DataInfo);
				var year = time.getFullYear();
				var month = time.getMonth() + 1;
				if (month < 10) month = `0${month}`;
				var day = time.getDate();
				if (day < 10) day = `0${day}`;
				var xingqi = time.getDay();
				var XingqiArray = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
				xingqi = XingqiArray[xingqi];

				return `${year == new Date().getFullYear() ? '' : year} ${year}-${month}-${day} `;
			},
			computeHDYearTime(DataInfo) {
				var time = new Date(DataInfo);
				var year = time.getFullYear();
				var month = time.getMonth() + 1;
				if (month < 10) month = `0${month}`;
				var day = time.getDate();
				if (day < 10) day = `0${day}`;
				var xingqi = time.getDay();
				var XingqiArray = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
				xingqi = XingqiArray[xingqi];

				return `${year == new Date().getFullYear() ? '' : year} ${year}-${month}-${day} ${DataInfo.split(' ')[1]}`;
			},

			goBack() {
				let pages = getCurrentPages(); // 获取当前页面堆栈
				let pageCount = pages.length; // 页面堆栈中的页面数量
				// 判断是否有上级页面
				if (pageCount > 1) {
					// 如果有上级页面，则返回上级页面
					uni.navigateBack({
						delta: 1
					});
				} else {
					// 如果没有上级页面，则返回首页
					uni.switchTab({
						url: '/pages/tabbar/find/find' // 替换为你的首页路径
					});
				}
			},
			// async guanzhuUser() {
			// 	if (!this.Islogin) {
			// 		this.Microi.Tips('请先登录', false);
			// 		return;
			// 	}
			// 	var self = this;
			// 	var res = await self.Microi.ApiEngine.Run('GuanZhu_user', {
			// 		YonghuID: self.DataInfo.YonghuID,
			// 		Type: self.DataInfo.isGuanzhu
			// 	});
			// 	if (res.Code != 1) {
			// 		this.Microi.Tips(res.Msg, false);
			// 	} else {
			// 		// this.Microi.Tips(res.Msg, true);
			// 		self.DataInfo.isGuanzhu = self.DataInfo.isGuanzhu ? 0 : 1;
			// 	}
			// },
			stopApplyTap() {
				console.log("停止申请");
			},
			async aboardTap(item) {	
				console.log(item,'item');
				// let avatar=JSON.parse(uni.getStorageSync('CurrentUser')).Avatar
				// let res = await this.Microi.FormEngine.AddFormData({
				// 	FormEngineKey: 'diy_baomingList ',
				// 	HuodongID: this.options.id,
				// 	UserId: this.CurrentUser.Id,
				// 	UserName: this.CurrentUser.UserName,
				// 	TouxiangSC: avatar
				// })
				// if (res.Code == 1) {
				// 	this.Microi.Tips(res.Msg, true);
				// 	this.getBaomingList()
				// } else {
				// 	this.Microi.Tips(res.Msg, false);
				// }
			},
			copyTap() {
				console.log("复制");
			},
			concernTap() {
				this.concern = !this.concern
				console.log("关注");
			},
			returnTap() {
				uni.navigateBack()
				console.log("返回按钮");
			},
			shareTap() {
				console.log("转发");
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F5F5F5;
	}

	.returnBox {
		margin-left: 30rpx;
		background: rgba(255, 255, 255, 0.4);
		width: 100rpx;
		border-radius: 50rpx 50rpx 50rpx 50rpx;
		border: 1rpx solid rgba(79, 62, 112, 0.2);
		padding: 12rpx 20rpx;

		image:nth-of-type(1) {
			width: 22rpx;
			height: 44rpx;
		}

		image:nth-of-type(2) {
			width: 40rpx;
			height: 40rpx;
		}

		text {
			margin: 0 15rpx;
			color: #C0C0C0;
		}
	}

	.swiper {
		width: 100%;
		height: 720rpx;

		image {
			width: 100%;
			height: 720rpx;
		}
	}

	.swiperBox {
		background-color: #FFF;
		padding: 30rpx;
		font-weight: 500;
		font-size: 28rpx;

		view:nth-of-type(1) {
			padding: 30rpx 0 10rpx;
			font-weight: 800;
			font-size: 36rpx;
			color: #212121;
		}

		view:nth-of-type(2) {

			font-size: 24rpx;
			color: #999999;

			text:nth-of-type(1) {

				font-weight: 800;
				font-size: 48rpx;
				color: #FE0916;
			}
		}

		view:nth-of-type(3) {
			image {
				width: 36rpx;
				height: 36rpx;
				margin-right: 8rpx;
			}

			padding: 14rpx 0 24rpx;
			color: #212121;
		}

		view:nth-of-type(4) {
			image {
				width: 40rpx;
				height: 36rpx;
				margin-right: 4rpx;
			}

			color: #212121;
		}

		view:nth-of-type(5) {
			padding: 24rpx 0;
			color: #FF7F83;
		}

		view:nth-of-type(6) {
			font-size: 24rpx;
			color: #999999;
		}
		&-header {
			padding-top: 30rpx;

			image {
				border-radius: 50%;
				width: 88rpx;
				height: 88rpx;
			}

			text:nth-of-type(1) {
				font-weight: 500;
				font-size: 36rpx;
				color: #212121;
				margin: 0 20rpx;
			}

			text:nth-of-type(2) {
				font-size: 26rpx;
				border-radius: 32rpx;
				padding: 6rpx 16rpx;
			}
		}
	}

	.grayBackground {
		color: #999999;
		background: #EEEEEE;
	}

	.redBackground {
		color: #FFF;
		background: #FB353B;
	}

	.numberBox {
		font-weight: 500;
		font-size: 24rpx;
		background: #FFFFFF;
		margin: 20rpx 0;
		padding: 20rpx 30rpx;

		&-left {
			color: #999999;
		}

		&-right {
			color: #FB353B;

			image {
				width: 24rpx;
				height: 24rpx;
				margin-left: 4rpx;
			}
		}

		&-header {
			text-align: center;
			flex-direction: column;
			align-items: center;
			display: flex;
			text-align: left;
			margin: 30rpx 28rpx 0 0;

			image {
				border-radius: 50%;
				width: 88rpx;
				height: 88rpx;
			}

			view {
				margin-top: 12rpx;
				font-weight: 500;
				font-size: 28rpx;
				color: #212121;
			}
		}
	}

	.contentBox {
		background: #FFFFFF;
		font-weight: 500;
		font-size: 28rpx;
		color: #212121;
		padding: 30rpx;

		view {}

		&-left {
			font-weight: 800;
		}

		&-right {
			image {
				width: 24rpx;
				height: 24rpx;
				margin-right: 4rpx;
			}

			font-size: 24rpx;
			color: #999999;
		}
	}

	.stopApplyBox {
		background: #FFF;
		width: 100%;
		padding: 40rpx 0;
		position: fixed;
		left: 0;
		bottom: 0;

		text {
			font-weight: 800;
			font-size: 32rpx;
			color: #444444;
			background: #F6F6F6;
			border-radius: 80rpx;
			padding: 20rpx 280rpx;
			margin: 20rpx 30rpx;
		}
	}

	.aboardBox {
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		background: #FFF;
		// background-color: #999999;
		padding: 30rpx;

		&-left {
			view {
				margin-right: 20rpx;

				image {
					width: 40rpx;
					height: 40rpx;
				}

				text {
					margin-left: 5rpx;
					font-weight: 800;
					font-size: 28rpx;
					color: #666666;
				}
			}
		}

		&-right {
			margin-right: 60rpx;
			background: #FB353B;
			border-radius: 80rpx;
			padding: 22rpx 120rpx;

			text {
				font-weight: 800;
				font-size: 32rpx;
				color: #FFFFFF;
			}
		}
	}
</style>